<template>
  <div class="divBox">
    <el-row :gutter="24" class="mb20">
      <el-col :span="12">
        <el-card :bordered="false" class="dashboard-console-visit">
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <div class="header_title">近30天推广情况分析</div>
              </div>
              <div class="acea-row row-middle">
                <el-button size="small" @click="skip1">查看详情</el-button>
              </div>
            </div>
          </div>
          <!--            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesType"></echarts-from>-->
          <div style="height: 300px;background-color: #fff;" class="chart" id="chart1"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card :bordered="false" class="dashboard-console-visit">
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <div class="header_title">商家30天总收入情况</div>
              </div>
              <div class="acea-row row-middle">
                <el-button size="small" @click="skip2">查看详情</el-button>
              </div>
            </div>
          </div>
          <div style="height: 300px;background-color: #fff;" class="chart" id="chart2"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="mb20">
      <el-col :span="12">
        <el-card :bordered="false" class="dashboard-console-visit">
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <div class="header_title">近一周用户益联券消费情况</div>
              </div>
              <div class="acea-row row-middle">
                <el-button size="small" @click="skip3">查看详情</el-button>
              </div>
            </div>
          </div>
          <div style="height: 300px;background-color: #fff;" class="chart" id="chart3"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card :bordered="false" class="dashboard-console-visit">
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <div class="header_title">商家销量top5</div>
              </div>
            </div>
          </div>
          <div style="height: 300px">
            <el-table :data="topMerchants" style="width: 100%">
              <el-table-column label="编号" align="center" width="80">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="商家名称" align="center" width="300">
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column label="销量" align="center">
                <template slot-scope="scope">
                  {{ scope.row.sales }}
                </template>
              </el-table-column>
              <el-table-column label="销售益联券" align="center">
                <template slot-scope="scope">
                  {{ scope.row.voucher }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="mb20">
      <el-col :span="12">
        <el-card :bordered="false" class="dashboard-console-visit">
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <div class="header_title">益联券消费排行榜</div>
              </div>
            </div>
          </div>
          <div style="height: 300px">
            <el-table :data="voucherList" height="250" style="width: 100%">
              <el-table-column label="编号" align="center" width="80">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="用户名称" align="center" width="300">
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column label="手机号" align="center">
                <template slot-scope="scope">
                  {{ scope.row.phone }}
                </template>
              </el-table-column>
              <el-table-column label="消费额度" align="center">
                <template slot-scope="scope">
                  {{ scope.row.totalVoucher }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card :bordered="false" class="dashboard-console-visit">
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <div class="header_title">积分消费排行榜</div>
              </div>
            </div>
          </div>
          <div style="height: 300px">
            <el-table :data="integralList" height="250" style="width: 100%">
              <el-table-column label="编号" align="center" width="80">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="用户名称" align="center" width="300">
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column label="手机号" align="center">
                <template slot-scope="scope">
                  {{ scope.row.phone }}
                </template>
              </el-table-column>
              <el-table-column label="消费额度" align="center">
                <template slot-scope="scope">
                  {{ scope.row.totalVoucher }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="mb20">
      <el-col :span="12">
        <el-card :bordered="false" class="dashboard-console-visit">
          <!--          <template>-->
          <!--            <el-button-group>-->
          <!--              <el-button plain size="mini" :type="trendType === 1 ? 'primary' : ''" @click="handleButtonClick(1)">日-->
          <!--              </el-button>-->
          <!--              <el-button plain size="mini" :type="trendType === 2 ? 'primary' : ''" @click="handleButtonClick(2)">周-->
          <!--              </el-button>-->
          <!--              <el-button plain size="mini" :type="trendType === 3 ? 'primary' : ''" @click="handleButtonClick(3)">月-->
          <!--              </el-button>-->
          <!--              <el-button plain size="mini" :type="trendType === 4 ? 'primary' : ''" @click="handleButtonClick(4)">年-->
          <!--              </el-button>-->
          <!--            </el-button-group>-->
          <!--          </template>-->
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <div class="header_title">商家兑换</div>
              </div>
            </div>
          </div>
          <div style="height: 300px;background-color: #fff;" class="chart" id="chart4"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card :bordered="false" class="dashboard-console-visit">
          <!--          <el-button-group>-->
          <!--            <el-button plain size="mini" :type="type === 1 ? 'primary' : ''" @click="handleButtonClick1(1)">一级返佣-->
          <!--            </el-button>-->
          <!--            <el-button plain size="mini" :type="type === 2 ? 'primary' : ''" @click="handleButtonClick1(2)">二级返佣-->
          <!--            </el-button>-->
          <!--            <el-button plain size="mini" :type="type === 3 ? 'primary' : ''" @click="handleButtonClick1(3)">月-->
          <!--            </el-button>-->
          <!--            <el-button plain size="mini" :type="type === 4 ? 'primary' : ''" @click="handleButtonClick1(4)">年-->
          <!--            </el-button>-->
          <!--          </el-button-group>-->
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <div class="header_title">抽成流水走势</div>
              </div>
            </div>
          </div>
          <div style="height: 300px;background-color: #fff;" class="chart" id="chart5"></div>
        </el-card>
      </el-col>
    </el-row>
    <!--    <el-row :gutter="24" class="mb20" v-if="role==1">-->
    <!--      <el-col :span="24">-->
    <!--        <el-card class="box-card">-->
    <!--          <div slot="header">-->
    <!--            <div class="acea-row row-between-wrapper">-->
    <!--              <div class="acea-row row-middle">-->
    <!--                <div class="header_title">券总量使用情况</div>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--          <template>-->
    <!--            <div style="max-height: 770px;overflow-y: auto">-->

    <!--              <el-table border :data="totalCouponUsage" stripe style="width: 100%;margin-bottom: 20px">-->
    <!--                <el-table-column prop="amountOfCouponIssued" label="发放益联券量"/>-->
    <!--                <el-table-column prop="membersOpenBonusCouponAmount" label="会员开通奖励益联券量"/>-->
    <!--                <el-table-column prop="laXinBonusCouponAmount" label="拉新奖励益联券量"/>-->
    <!--                <el-table-column prop="totalNumberOfCouponIssuedByPlatform" label="平台总发放益联券总量（发放+会员开通+拉新）"/>-->
    <!--                <el-table-column prop="totalNumberOfCouponsRecoveredByPlatform" label="平台收回益联券总量（抽成+商城）"/>-->
    <!--              </el-table>-->
    <!--            </div>-->
    <!--          </template>-->
    <!--        </el-card>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!--    <el-row :gutter="24" class="mb20" v-if="role==1">-->
    <!--      <el-col :span="24">-->
    <!--        <el-card class="box-card">-->
    <!--          <div slot="header">-->
    <!--            <div class="acea-row row-between-wrapper">-->
    <!--              <div class="acea-row row-middle">-->
    <!--                <div class="header_title">积分总量使用情况</div>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--          <template>-->
    <!--            <div style="max-height: 770px;overflow-y: auto">-->

    <!--              <el-table border :data="integralUsage" stripe style="width: 100%;margin-bottom: 20px">-->
    <!--                <el-table-column prop="integralTotal" label="积分总量(平台流转券比例兑换+签到+抽奖)"/>-->
    <!--                <el-table-column prop="integralStock" label="积分现存量"/>-->
    <!--                <el-table-column prop="pointRedemption" label="积分兑换量"/>-->
    <!--              </el-table>-->
    <!--            </div>-->
    <!--          </template>-->
    <!--        </el-card>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <el-row :gutter="24" class="mb20">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <div class="header_title">财务报表</div>
              </div>
            </div>
          </div>
          <template>
            <div style="max-height: 770px;overflow-y: auto">
              <el-row style="margin-bottom: 20px">
                时间范围：
                <el-date-picker
                    v-model="time1"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    >
                </el-date-picker>
                <template v-if="role!=4">
                  地区：
                  <el-cascader
                      class="col"
                      placeholder="选择地区"
                      v-model="value"
                      :options="options"
                      clearable
                      :props="{ expandTrigger: 'hover' }"
                      filterable
                      @change="handleChange"
                      style="margin-left: 20px; margin-bottom: 20px;">
                  </el-cascader>
                </template>
                <el-button @click="search" type="primary" size="small" style="margin-left: 20px">搜索</el-button>
                <el-button @click="reset" type="primary" size="small" style="margin-left: 20px">重置</el-button>
                <el-button @click="openExportDialog" type="primary" size="small" style="margin-left: 20px">导出报表
                </el-button>
              </el-row>
              <el-table border :data="table3" stripe style="width: 100%;margin-bottom: 20px">
                <el-table-column prop="statisticsOnTotalAmountCouponsIssuedByPlatform" label="券总量">
                  <template slot-scope="scope">
                    <span>{{ scope.row.statisticsOnTotalAmountCouponsIssuedByPlatform }}</span>
                    <el-button type="text" size="small" @click="openToViewDetails(0)">查看详情</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="totalPoints" label="积分总量">
                  <template slot-scope="scope">
                    <span>{{ scope.row.totalPoints }}</span>
                    <el-button type="text" size="small" @click="openToViewDetails(1)">查看详情</el-button>
                  </template>
                </el-table-column>
                <template v-if="role!= 2 && role!= 3 && role!= 4">
                  <el-table-column prop="totalPumping" label="总抽水">
                    <template slot-scope="scope">
                      <span>{{ scope.row.totalPumping }}</span>
                      <el-button type="text" size="small" @click="openToViewDetails(2)">查看详情</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="vipAmount" label="会员开通金额">
                    <template slot-scope="scope">
                      <span>{{ scope.row.vipAmount }}</span>
                      <el-button type="text" size="small" @click="openToViewDetails(3)">查看详情</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="rechargeAmount" label="会员充值金额">
                    <template slot-scope="scope">
                      <span>{{ scope.row.rechargeAmount }}</span>
                      <el-button type="text" size="small" @click="openRechargeAmountViewDetails()">查看详情</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="totalCirculation" label="总流转">
                    <template slot-scope="scope">
                      <span>{{ scope.row.totalCirculation }}</span>
                      <el-button type="text" size="small" @click="openToViewDetails(4)">查看详情</el-button>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="mb20">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <div class="header_title">消费多少送多少报表</div>
              </div>
            </div>
          </div>
          <template>
            <div style="max-height: 770px;overflow-y: auto" v-if="role!= 2 && role!= 3 && role!= 4">
              <el-row style="margin-bottom: 20px">
                时间范围：
                <el-date-picker
                    v-model="time2"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>

                <el-button @click="search" type="primary" size="small" style="margin-left: 20px">搜索</el-button>
                <el-button @click="reset" type="primary" size="small" style="margin-left: 20px">重置</el-button>

              </el-row>
              <el-table border :data="table4" stripe style="width: 100%;margin-bottom: 20px">
                <el-table-column prop="howMuchDoYouSpendAndHowMuchDoYouSend" label="总流转券量">
                  <template slot-scope="scope">
                    <span>{{ scope.row.howMuchDoYouSpendAndHowMuchDoYouSend }}</span>
                    <el-button type="text" size="small" @click="openConsumePopsUp(1)">查看详情</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="howMuchDoYouSpendAndHowMuchPartner" label="商家券量">
                  <template slot-scope="scope">
                    <span>{{ scope.row.howMuchDoYouSpendAndHowMuchPartner }}</span>
                    <el-button type="text" size="small" @click="openConsumePopsUp(2)">查看详情</el-button>
                  </template>
                </el-table-column>
                <template >
                  <el-table-column prop="platformVoucherQuantity" label="平台券量">
                    <template slot-scope="scope">
                      <span>{{ scope.row.platformVoucherQuantity }}</span>
                      <el-button type="text" size="small" @click="openConsumePopsUp(4)">查看详情</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="districtCouponVolume" label="区代券量">
                    <template slot-scope="scope">
                      <span>{{ scope.row.districtCouponVolume }}</span>
                      <el-button type="text" size="small" @click="openConsumePopsUp(3)">查看详情</el-button>
                    </template>
                  </el-table-column>

                </template>
              </el-table>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="mb20">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <div class="header_title">好友转账及抽成报表</div>
              </div>
            </div>
          </div>
          <template>
            <div style="max-height: 770px;overflow-y: auto" v-if="role!= 2 && role!= 3 && role!= 4">
              <el-row style="margin-bottom: 20px">
                时间范围：
                <el-date-picker
                    v-model="time3"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>

                <el-button @click="search" type="primary" size="small" style="margin-left: 20px">搜索</el-button>
                <el-button @click="reset" type="primary" size="small" style="margin-left: 20px">重置</el-button>

              </el-row>
              <el-table border :data="table5" stripe style="width: 100%;margin-bottom: 20px">
                <el-table-column prop="transferDataTotalAmountCirculatingCoupons" label="总流转券量">
                  <template slot-scope="scope">
                    <span>{{ scope.row.transferDataTotalAmountCirculatingCoupons }}</span>
                    <el-button type="text" size="small" @click="openTransDataListPopsUp(1)">查看详情</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="amountCouponsReceivedByFriends" label="好友收到券量">
                  <template slot-scope="scope">
                    <span>{{ scope.row.amountCouponsReceivedByFriends }}</span>
                    <el-button type="text" size="small" @click="openTransDataListPopsUp(2)">查看详情</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="transferFee" label="转账手续费">
                  <template slot-scope="scope">
                    <span>{{ scope.row.transferFee }}</span>
                    <el-button type="text" size="small" @click="openTransDataListPopsUp(3)">查看详情</el-button>
                  </template>
                </el-table-column>
                <template >
                  <el-table-column prop="platformVoucherQuantity" label="平台抽成">
                    <template slot-scope="scope">
                      <span>{{ scope.row.draw.total_platform_voucher }}</span>
                      <el-button type="text" size="small" @click="openTransDataListPopsUp(4)">查看详情</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="districtCouponVolume" label="市代抽成">
                    <template slot-scope="scope">
                      <span>{{ scope.row.draw.total_city_voucher }}</span>
                      <el-button type="text" size="small" @click="openTransDataListPopsUp(5)">查看详情</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="districtCouponVolume" label="区代抽成">
                    <template slot-scope="scope">
                      <span>{{ scope.row.draw.total_area_voucher }}</span>
                      <el-button type="text" size="small" @click="openTransDataListPopsUp(6)">查看详情</el-button>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
        :visible.sync="exportDialog.show"
        title="财务报表导出"
        destroy-on-close
        :close-on-click-modal="false"
        width="600px">
      <export-order
          v-if="exportDialog.show"
          @hideExportDialog="hideExportDialog"
          ref="editForm"
      />
    </el-dialog>


    <el-dialog
        :visible.sync="totalNumberOfTicketsPopsUp.show"
        title="财务明细表"
        destroy-on-close
        :close-on-click-modal="false"
        width="1200px">
      <visit-list
          v-if="totalNumberOfTicketsPopsUp.show"
          :type="totalNumberOfTicketsPopsUp.type"
          @hideExportNumberOfTicketsPopsUp="hideExportNumberOfTicketsPopsUp"
          ref="editForm"
      />
    </el-dialog>

    <el-dialog
        :visible.sync="rechargeAmountDialog.show"
        title="财务明细表"
        destroy-on-close
        :close-on-click-modal="false"
        width="1200px">
      <recharge-amount
          v-if="rechargeAmountDialog.show"
          @hideRechargeAmount="hideRechargeAmount"
          ref="editForm"
      />
    </el-dialog>

    <el-dialog
        :visible.sync="consumePopsUp.show"
        title="消费多少送多少明细表"
        destroy-on-close
        :close-on-click-modal="false"
        width="1200px">
      <consume-list
          v-if="consumePopsUp.show"
          :type="consumePopsUp.type"
          @hideConsumePopsUp="hideConsumePopsUp"
          ref="editForm"
      />
    </el-dialog>


    <el-dialog
        :visible.sync="transDataListPopsUp.show"
        title="转账抽成明细表"
        destroy-on-close
        :close-on-click-modal="false"
        width="1200px">
      <trans-data-list
          v-if="transDataListPopsUp.show"
          :type="transDataListPopsUp.type"
          @hideTransDataListPopsUp="hideTransDataListPopsUp"
          ref="editForm"
      />
    </el-dialog>

  </div>
</template>
<script>
import {

  voucherIncomeApi,
  userVoucherConsumption,
  promotionApi,
  getTopOfMerchant,
  getIntegralList,
  getVoucherList,
  businessTrendsApi,
  turnoverTrendApi,
  financialStatement,
  queryStatusPoints,
  totalUsageCoupons,
  consumerData,
  transferData
} from '@/api/dashboard'
import {optionsList} from "@/api/business";
import Cookies from 'js-cookie'
import exportOrder from "@/views/dashboard/exportOrder.vue";
import visitList from "@/views/dashboard/components/visitList.vue";
import ConsumeList from "@/views/dashboard/components/ConsumeList.vue";
import transDataList from "@/views/dashboard/components/TransDataList.vue";
import RechargeAmount from "@/views/dashboard/components/recharge-amount.vue";
export default {
  components: {RechargeAmount, exportOrder,visitList,ConsumeList,transDataList},

  data() {
    return {
      dateRange: [], // 时间范围选择器选中的日期范围
      statisticsData: [], // 统计数据
      value: [],
      options: [{
        value: '',
        label: '',
        children: [{
          value: '',
          label: '',
          children: [{
            value: '',
            label: ''
          }]
        }]
      }],
      exportDialog: {
        show: false
      },
      totalNumberOfTicketsPopsUp: {
        show: false,
        type: 0
      },
      rechargeAmountDialog: {
        show: false,
      },
      transDataListPopsUp: {
        show: false,
        type: 0
      },
      consumePopsUp: {
        show: false,
        type: 0
      },
      table3: [],
      table4: [],
      table5: [],
      integralUsage: [],
      totalCouponUsage: [],
      time1: '',
      time2: '',
      time3: '',
      startTime: '',
      endTime: '',
      areaId: '',
      //info: {},
      role: null,
      infoList: null,
      seriesType: [],
      promotionNumberDate: [],
      promotionNumber: [],
      topMerchants: [
        {merchantName: '商家A', salesVolume: 100},
        {merchantName: '商家B', salesVolume: 95},
        {merchantName: '商家C', salesVolume: 90},
        {merchantName: '商家D', salesVolume: 85},
        {merchantName: '商家E', salesVolume: 80},
      ],
      voucherList: [],
      integralList: [],
      type: 1,
      trendType: 1
    }
  },
  watch: {

    time1(val) {
      if (val != null) {
        this.startTime = val[0];
        this.endTime = val[1]
      } else {
        this.startTime = '';
        this.endTime = '';
      }
    },

    time2(val) {
      if (val != null) {
        this.startTime = val[0];
        this.endTime = val[1]
      } else {
        this.startTime = '';
        this.endTime = '';
      }
    },

    time3(val) {
      if (val != null) {
        this.startTime = val[0];
        this.endTime = val[1]
      } else {
        this.startTime = '';
        this.endTime = '';
      }
    },


    '$route.path': function(newVal, oldVal) {
      if (newVal === '/dashboard' && newVal !== oldVal) {  // 假设首页的路由路径是 '/home'
        this.getDetail()
      }
    }
  },
  methods: {
    openToViewDetails(type)
    {
      this.totalNumberOfTicketsPopsUp.show=true;
      this.totalNumberOfTicketsPopsUp.type=type;
    },
    openRechargeAmountViewDetails()
    {
      this.rechargeAmountDialog.show=true;
    },
    openTransDataListPopsUp(type)
    {
      this.transDataListPopsUp.show=true;
      this.transDataListPopsUp.type=type;
    },
    hideTransDataListPopsUp()
    {
      this.transDataListPopsUp.show=false
    },
    openConsumePopsUp(type)
    {
      this.consumePopsUp.show=true;
      this.consumePopsUp.type=type;
    },
    hideExportNumberOfTicketsPopsUp()
    {
      this.totalNumberOfTicketsPopsUp.show=false
    } ,
    hideRechargeAmount()
    {
      this.rechargeAmountDialog.show=false
    },
    hideConsumePopsUp()
    {
      this.consumePopsUp.show=false
    },
    openExportDialog()
    {
      this.exportDialog.show=true;
    },
    hideExportDialog()
    {
      this.exportDialog.show=false;
    },
    getCurrentRole() {
      this.role = Cookies.get('Role');
    },
    skip1() {
      this.$router.push({name: 'UserIndex'})
    },
    skip2() {
      this.$router.push({name: 'BusinessOrderIndex'})
    },
    skip3() {
      this.$router.push({name: 'Order'})
    },
    getDetail() {
      financialStatement({startTime: this.startTime, endTime: this.endTime, areaId: this.areaId}).then(res => {
        this.table3 = []
        this.table3.push(res)
      })
      consumerData({startTime: this.startTime, endTime: this.endTime, areaId: this.areaId}).then(res => {
        this.table4 = []
        this.table4.push(res)
      })
      transferData({startTime: this.startTime, endTime: this.endTime, areaId: this.areaId}).then(res => {
        this.table5 = []
        this.table5.push(res)
      })
    },
    search() {
      financialStatement({startTime: this.startTime, endTime: this.endTime, areaId: this.areaId}).then(res => {
        this.table3 = []
        this.table3.push(res)
      })
      consumerData({startTime: this.startTime, endTime: this.endTime, areaId: this.areaId}).then(res => {
        this.table4 = []
        this.table4.push(res)
      })
      transferData({startTime: this.startTime, endTime: this.endTime, areaId: this.areaId}).then(res => {
        this.table5 = []
        this.table5.push(res)
      })
    },
    statisticalIntegral() {
      queryStatusPoints().then(res => {
        this.integralUsage = []
        this.integralUsage.push(res)
      })
    },
    statisticalVoucher() {
      totalUsageCoupons().then(res => {
        this.totalCouponUsage = []
        this.totalCouponUsage.push(res)
      })
    },
    reset() {
      this.startTime = '';
      this.endTime = '';
      this.areaId = '';
      this.value = ''
      this.time1 = ''
      this.time2 = ''
      this.time3 = ''
      this.search();
    },
    getOptions() {
      optionsList().then(res => {
        this.options = res
      })
    },
    handleChange(value) {
      this.areaId = value[2]
      this.value = value
    },
    // fetchData() {
    //   // 根据选择的时间范围调用接口获取数据
    //   // 假设你的接口地址是 '/api/statistics'
    //   const startDate = this.dateRange[0];
    //   const endDate = this.dateRange[1];
    //   fetch(`/api/statistics?startDate=${startDate}&endDate=${endDate}`)
    //       .then(response => response.json())
    //       .then(data => {
    //         // 更新统计数据
    //         this.statisticsData = data;
    //       })
    //       .catch(error => {
    //         console.error('Error fetching data:', error);
    //       });
    // },
    handleButtonClick(type) {
      this.trendType = type;
      this.initChart4();
    },
    handleButtonClick1(type) {
      this.type = type;
      this.initChart5();
    },
    initChart1() {

      let charts = this.$echarts.init(document.getElementById('chart1'));


      charts.showLoading({
        text: '加载中',
        textColor: '#000',
        maskColor: 'rgba(0,0,0,0)'
      })
      let option = {
        backgroundColor: 'white',
        grid: {
          top: 20,
          left: 20,
          right: 10,
          bottom: 20,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: ['03-08', '03-09', '03-10', '03-11', '03-12', '03-14', '03-15',],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E5E6EB',
            }
          },
          axisLabel: {
            color: '#86909C',
            fontSize: 12,
          },
        },
        yAxis: [{
          type: 'value',
          nameTextStyle: {
            color: "#000",
            fontSize: 14,
            padding: [0, 0, 0, 30]
          },
          axisLabel: {
            color: '#4E5969',
            fontSize: 12
          },
          splitLine: {     //网格线
            "show": true,
          }
        }],
        series: [
          {
            type: 'line',
            smooth: true,
            showSymbol: false,
            barWidth: 20,
            data: [90, 70, 98, 11, 22, 66, 77, 77],
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.9, [
                // {
                //   offset: 0,
                //   color: 'rgba(58,77,233,0.8)'
                //   // color:'rgba(170, 201 ,234,0.8)'
                // },
                {
                  offset: 1,
                  // color: 'rgba(58,77,233,0)'
                  color: 'rgba(26, 137, 253,0.5)'
                },
                {
                  offset: 0,
                  color: 'rgba(74, 136, 199,1)'
                  // color: 'rgba(58,77,233,0.9)'
                },
              ])
            },
            itemStyle: {
              normal: {
                color: "#4080FF",
                width: 2
              },
            },
          }
        ]
      }
      promotionApi().then((res) => {
        option.xAxis.data = res.data
        option.series[0].data = res.value;
        charts.hideLoading();
        charts.setOption(option);
      })
    },
    initChart2() {
      let charts = this.$echarts.init(document.getElementById('chart2'));
      charts.showLoading({
        text: '加载中',
        textColor: '#000',
        maskColor: 'rgba(0,0,0,0)'
      })
      let option = {
        backgroundColor: 'white',
        grid: {
          top: 20,
          left: 20,
          right: 10,
          bottom: 20,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: ['03-08', '03-09', '03-10', '03-11', '03-12', '03-14', '03-15',],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E5E6EB',
            }
          },
          axisLabel: {
            color: '#86909C',
            fontSize: 12,
          },
        },
        yAxis: [{
          type: 'value',
          nameTextStyle: {
            color: "#000",
            fontSize: 14,
            padding: [0, 0, 0, 30]
          },
          axisLabel: {
            color: '#4E5969',
            fontSize: 12
          },
          splitLine: {     //网格线
            "show": true,
          }
        }],
        series: [
          {
            type: 'line',
            smooth: true,
            showSymbol: false,
            barWidth: 20,
            data: [90, 70, 98, 11, 22, 66, 77, 77],
            itemStyle: {
              normal: {
                color: "#4080FF",
                width: 2
              },
            },
          }
        ]
      }
      voucherIncomeApi().then((res) => {
        option.xAxis.data = res.data
        option.series[0].data = res.value;
        charts.hideLoading();
        charts.setOption(option);
      })
    },
    initChart3() {
      let charts = this.$echarts.init(document.getElementById('chart3'));
      charts.showLoading({
        text: '加载中',
        textColor: '#000',
        maskColor: 'rgba(0,0,0,0)'
      })
      let option = {
        backgroundColor: 'white',
        grid: {
          top: 20,
          left: 20,
          right: 10,
          bottom: 20,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: ['03-08', '03-09', '03-10', '03-11', '03-12', '03-14', '03-15',],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E5E6EB',
            }
          },
          axisLabel: {
            color: '#86909C',
            fontSize: 12,
          },
        },
        yAxis: [{
          type: 'value',
          nameTextStyle: {
            color: "#000",
            fontSize: 14,
            padding: [0, 0, 0, 30]
          },
          axisLabel: {
            color: '#4E5969',
            fontSize: 12
          },
          splitLine: {     //网格线
            "show": false,
          }
        }],
        series: [
          {
            type: 'bar',
            barWidth: 20,
            data: [90, 70, 98, 11, 22, 66, 77, 77],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top',
                  textStyle: { //数值样式
                    color: '#333',
                    fontSize: 10
                  }
                },
                color: "#468DFF"
              },
            },
          }
        ]
      }
      userVoucherConsumption().then((res) => {
        option.xAxis.data = res.data
        option.series[0].data = res.value;
        charts.hideLoading();
        charts.setOption(option);
      })
    },
    initChart4() {
      let charts = this.$echarts.init(document.getElementById('chart4'));
      charts.showLoading({
        text: '加载中',
        textColor: '#000',
        maskColor: 'rgba(0,0,0,0)'
      })
      // let option = {
      //   backgroundColor: "",
      //   color: [
      //     "#72A9FE",
      //     "#FFC533",
      //   ],
      //   title: {},
      //   legend: {
      //     orient: "horizontal",
      //     data: [
      //       {
      //         "name": "订单数"
      //       },
      //       {
      //         "name": "营业额"
      //       }
      //     ],
      //     left: 70,
      //     top: "4%",
      //     textStyle: {
      //       color: "#666",
      //       fontSize: 12
      //     }
      //   },
      //   grid: {
      //     left: '2%',
      //     right: '4%',
      //     bottom: '6%',
      //     top: '16%',
      //     containLabel: true
      //   },
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       type: "shadow"
      //     },
      //     textStyle: {
      //       align: "left"
      //     }
      //   },
      //   xAxis: [
      //     {
      //       type: "category",
      //       data: [],
      //       axisTick: {
      //         show: false,
      //
      //       },
      //       axisLine: {
      //         show: true,
      //         lineStyle: {
      //           color: '#cdd5e2'
      //         }
      //       },
      //       axisLabel: {
      //         show: true,
      //         textStyle: {
      //           color: "#282828",
      //           fontSize: 9
      //         },
      //         formatter: "{value}"
      //       },
      //     }
      //   ],
      //   yAxis: [
      //     {
      //       type: "value",
      //       name: "数量",
      //       axisTick: {
      //         show: false
      //       },
      //       axisLine: {
      //         show: true,
      //         lineStyle: {
      //           color: '#cdd5e2'
      //         }
      //       },
      //       axisLabel: {
      //         show: true,
      //         formatter: "{value}", //右侧Y轴文字显示
      //         textStyle: {
      //           color: "#666666",
      //           fontSize: 12,
      //         }
      //       },
      //       splitLine: {
      //         show: false,
      //         lineStyle: {
      //           color: "rgba(255,255,255,0.2)"
      //         }
      //       },
      //       splitNumber: 5 // 控制Y轴刻度的密度
      //     },
      //     {
      //       type: "value",
      //       name: "金额",
      //       nameTextStyle: {
      //         color: "#666666"
      //       },
      //       position: "right",
      //       axisLine: {
      //         lineStyle: {
      //           color: '#cdd5e2'
      //         }
      //       },
      //       splitLine: {
      //         show: false,
      //       },
      //       axisLabel: {
      //         show: true,
      //         formatter: "{value}", //右侧Y轴文字显示
      //         textStyle: {
      //           color: "#666666",
      //           fontSize: 12,
      //         }
      //       },
      //       splitNumber: 5 // 控制Y轴刻度的密度
      //     }
      //   ],
      //   series: [
      //     {
      //       name: "订单数",
      //       type: "bar",
      //       stack: "数量",
      //       barWidth: "20%",
      //       data: [],
      //       itemStyle: {
      //         normal: {
      //           label: {
      //             show: true, //开启显示
      //             position: 'top',
      //             textStyle: { //数值样式
      //               color: '#333',
      //               fontSize: 10
      //             }
      //           }
      //         }
      //       }
      //
      //     },
      //     {
      //       name: "营业额",
      //       type: "line",
      //       yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
      //       smooth: false, //平滑曲线显示
      //       symbol: "circle", //标记的图形为实心圆
      //       symbolSize: 5, //标记的大小
      //       itemStyle: {
      //         normal: {
      //           color: '#ffa43a',
      //           borderColor: 'rgba(255, 234, 0, 0.5)',  //圆点透明 边框
      //           borderWidth: 7
      //         },
      //
      //       },
      //       lineStyle: {
      //         color: "#ffa43a"
      //       },
      //       label: { // 数据标签
      //         show: true, // 显示标签
      //         position: 'top', // 标签位置
      //         color: '#333', // 标签颜色
      //         fontSize: 10 // 标签字体大小
      //       },
      //       data: []
      //     }
      //   ]
      // }
      let option = {
        backgroundColor: 'white',
        grid: {
          top: 20,
          left: 20,
          right: 10,
          bottom: 20,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: ['03-08', '03-09', '03-10', '03-11', '03-12', '03-14', '03-15',],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E5E6EB',
            }
          },
          axisLabel: {
            color: '#86909C',
            fontSize: 12,
          },
        },
        yAxis: [{
          type: 'value',
          nameTextStyle: {
            color: "#000",
            fontSize: 14,
            padding: [0, 0, 0, 30]
          },
          axisLabel: {
            color: '#4E5969',
            fontSize: 12
          },
          splitLine: {     //网格线
            "show": false,
          }
        }],
        series: [
          {
            type: 'bar',
            barWidth: 20,
            data: [90, 70, 98, 11, 22, 66, 77, 77],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top',
                  textStyle: { //数值样式
                    color: '#333',
                    fontSize: 10
                  }
                },
                color: "#468DFF"
              },
            },
          }
        ]
      }
      turnoverTrendApi(this.trendType).then((res) => {
        option.xAxis.data = res.xdata
        option.series[0].data = res.lyData;
        // option.xAxis.data = res.data
        // option.series[0].data = res.value;
        charts.hideLoading();
        charts.setOption(option);
      })
    },
    initChart5() {
      let charts = this.$echarts.init(document.getElementById('chart5'));
      charts.showLoading({
        text: '加载中',
        textColor: '#000',
        maskColor: 'rgba(0,0,0,0)'
      })
      // let option = {
      //   backgroundColor: "",
      //   color: [
      //     "#72A9FE",
      //     "#FFC533",
      //   ],
      //   title: {},
      //   legend: {
      //     orient: "horizontal",
      //     data: [
      //       {
      //         "name": "顾客数"
      //       },
      //       {
      //         "name": "实收金额"
      //       }
      //     ],
      //     left: 70,
      //     top: "4%",
      //     textStyle: {
      //       color: "#666",
      //       fontSize: 12
      //     }
      //   },
      //   grid: {
      //     left: '2%',
      //     right: '4%',
      //     bottom: '6%',
      //     top: '16%',
      //     containLabel: true
      //   },
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       type: "shadow"
      //     },
      //     textStyle: {
      //       align: "left"
      //     }
      //   },
      //   xAxis: [
      //     {
      //       type: "category",
      //       data: [],
      //       axisTick: {
      //         show: false,
      //
      //       },
      //       axisLine: {
      //         show: true,
      //         lineStyle: {
      //           color: '#cdd5e2'
      //         }
      //       },
      //       axisLabel: {
      //         show: true,
      //         textStyle: {
      //           color: "#282828",
      //           fontSize: 9
      //         },
      //         formatter: "{value}"
      //       },
      //
      //     }
      //   ],
      //   yAxis: [
      //     {
      //       type: "value",
      //       name: "数量",
      //       axisTick: {
      //         show: false
      //       },
      //       axisLine: {
      //         show: true,
      //         lineStyle: {
      //           color: '#cdd5e2'
      //         }
      //       },
      //       axisLabel: {
      //         show: true,
      //         formatter: "{value}", //右侧Y轴文字显示
      //         textStyle: {
      //           color: "#666666",
      //           fontSize: 12,
      //         }
      //       },
      //       splitLine: {
      //         show: false,
      //         lineStyle: {
      //           color: "rgba(255,255,255,0.2)"
      //         }
      //       }
      //     },
      //     {
      //       type: "value",
      //       name: "金额",
      //       nameTextStyle: {
      //         color: "#666666"
      //       },
      //       position: "right",
      //       axisLine: {
      //         lineStyle: {
      //           color: '#cdd5e2'
      //         }
      //       },
      //       splitLine: {
      //         show: false,
      //       },
      //       axisLabel: {
      //         show: true,
      //         formatter: "{value}", //右侧Y轴文字显示
      //         textStyle: {
      //           color: "#666666",
      //           fontSize: 12,
      //         }
      //       }
      //     }
      //   ],
      //   series: [
      //     {
      //       name: "顾客数",
      //       type: "bar",
      //       stack: "数量",
      //       barWidth: "20%",
      //       data: [],
      //       itemStyle: {
      //         normal: {
      //           label: {
      //             show: true, //开启显示
      //             position: 'top',
      //             textStyle: { //数值样式
      //               color: '#333',
      //               fontSize: 10
      //             }
      //           }
      //         }
      //       }
      //
      //     },
      //     {
      //       name: "实收金额",
      //       type: "line",
      //       yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
      //       smooth: false, //平滑曲线显示
      //       symbol: "circle", //标记的图形为实心圆
      //       symbolSize: 5, //标记的大小
      //       itemStyle: {
      //         normal: {
      //           color: '#ffa43a',
      //           borderColor: 'rgba(255, 234, 0, 0.5)',  //圆点透明 边框
      //           borderWidth: 7
      //         },
      //
      //       },
      //       lineStyle: {
      //         color: "#ffa43a"
      //       },
      //       label: { // 数据标签
      //         show: true, // 显示标签
      //         position: 'top', // 标签位置
      //         color: '#333', // 标签颜色
      //         fontSize: 10 // 标签字体大小
      //       },
      //       data: []
      //     }
      //   ]
      // }
      let option = {
        backgroundColor: 'white',
        grid: {
          top: 20,
          left: 20,
          right: 10,
          bottom: 20,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: ['03-08', '03-09', '03-10', '03-11', '03-12', '03-14', '03-15',],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E5E6EB',
            }
          },
          axisLabel: {
            color: '#86909C',
            fontSize: 12,
          },
        },
        yAxis: [{
          type: 'value',
          nameTextStyle: {
            color: "#000",
            fontSize: 14,
            padding: [0, 0, 0, 30]
          },
          axisLabel: {
            color: '#4E5969',
            fontSize: 12
          },
          splitLine: {     //网格线
            "show": false,
          }
        }],
        series: [
          {
            type: 'bar',
            barWidth: 20,
            data: [90, 70, 98, 11, 22, 66, 77, 77],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top',
                  textStyle: { //数值样式
                    color: '#333',
                    fontSize: 10
                  }
                },
                color: "#468DFF"
              },
            },
          }
        ]
      }
      businessTrendsApi(this.type).then((res) => {
        option.xAxis.data = res.xdata
        option.series[0].data = res.lyData;
        // option.xAxis.data = res.data
        // option.series[0].data = res.value;
        charts.hideLoading();
        charts.setOption(option);
      })
    },
    getMerchantTop() {
      getTopOfMerchant().then((res) => {
        this.topMerchants = res
      })
    },
    getVoucherList() {
      getVoucherList().then((res) => {
        this.voucherList = res
      })
    },
    getIntegralList() {
      getIntegralList().then((res) => {
        this.integralList = res
      })
    }
  },
  mounted() {

    this.getCurrentRole();
    this.initChart1(); // 调用初始化折线图的方法
    this.getMerchantTop()
    this.initChart2()
    this.initChart3()
    this.initChart4()
    this.initChart5()
    this.getVoucherList()
    this.getIntegralList()
    this.getDetail()
    this.statisticalIntegral()
    this.statisticalVoucher()
    // 页面加载时默认获取当前时间范围内的统计数据
    const today = new Date();
    const startDate = new Date(today.getFullYear(), today.getMonth(), 1); // 当月第一天
    const endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0); // 当月最后一天
    this.dateRange = [startDate, endDate];
    this.getOptions();

  },
  created() {
    // this.chartPhotoType()
    // this.chartPhotoStatus()
    //this.chartUser()

    //this.handleChangeVisitType();
  }
}
</script>
<style lang="scss" scoped>
.acea-row {
  ::v-deep.el-avatar--small {
    width: 22px;
    height: 22px;
    line-height: 22px;
  }
}

.special-chat {
  width: 100%;
  height: 294px;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .special-chat-box {
    width: 100%;
    position: absolute;

    .line-box {
      height: calc(294px / 3);
      line-height: calc(294px / 3);
      display: flex;
      justify-content: space-around;

      .chat-line {
        font-size: 18px;
        font-weight: bold;
      }

      .chat-line:nth-child(2) {
        color: #fff;
        padding-left: 20%;
      }
    }
  }
}

.header_title {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  //padding-left:8px;
  position: relative;

  &::before {
    position: absolute;
    content: '';
    width: 0px;
    height: 18px;
    background: #1890FF;
    top: 0;
    left: 0;
  }
}

.checkTime {
  ::v-deep.el-radio__input {
    display: none;
  }
}

.ivu-pl-8 {
  margin-left: 8px;
  font-size: 14px;
}

.divBox {
  padding: 0 20px !important;
}

.dashboard-console-visit {
  ::v-deep.el-card__header {
    padding: 14px 20px !important;
  }

  ul {
    li {
      list-style-type: none;
      margin-top: 12px;
    }
  }
}

.ivu-mb {
  margin-bottom: 10px;
}

.card-container {
  margin-bottom: 20px; /* 设置底部外边距来创建间隙 */
}
</style>
